<template>
  <div class="register-container full-screen flex">
    <el-card class="card">
      <div class="register-head primary text-center">
        <h2>人脸识别门禁系统</h2>
      </div>
      <el-form ref="registerForm" :model="user" :rules="rules" @submit.prevent>
        <el-form-item prop="username">
          <el-input
            v-model="user.username"
            placeholder="请输入手机号"
            prefix-icon="iconfont iconemail"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            prefix-icon="iconfont iconpassword"
            v-model="user.password"
            type="password"
            placeholder="请输入密码，必须包含字母和数字，长度为6-18"
          ></el-input>
        </el-form-item>
        <el-form-item prop="confirm">
          <el-input
            prefix-icon="iconfont iconpassword"
            v-model="user.confirm"
            placeholder="请确认密码"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            native-type="submit"
            :loading="registerLoading"
            @click="onSubmit"
            style="width: 100%; margin-top: 30px"
            >注册</el-button
          >
        </el-form-item>
        <div class="text-center">
          <router-link to="/login" class="primary to_login"
            >已有账号，去登录<i class="el-icon-right"></i
          ></router-link>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { register } from "/src/network/account.js";
export default {
  name: "register",
  components: {},
  data() {
    const checkConfirm = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请确认密码"));
      } else if (value !== this.user.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    const checkPassword = (rule, value, callback) => {
      const patten = /^(?=.*\d)(?=.*[a-z])[a-zA-Z0-9]{6,18}$/;
      if (!patten.test(value)) {
        callback(new Error("密码不符合要求"));
      } else {
        callback();
      }
    };
    return {
      user: {
        username: "",
        password: "",
        confirm: "",
      },
      registerLoading: false,
      rules: {
        username: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { min: 6, max: 11, message: "手机号码格式错误", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { validator: checkPassword, trigger: "blur" },
        ],
        confirm: [{ validator: checkConfirm, trigger: "blur" }],
      },
    };
  },
  methods: {
    onSubmit() {
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          this.register();
        }
      });
    },
    register() {
      const user = this.user;
      this.registerLoading = true;
      register(user.username, user.password).then(
        (res) => {
          if (res.code === 200) {
            this.$message({
              type: "success",
              message: "注册成功",
            });
            this.$router.push({
              name: "Login",
            });
          } else {
            this.$message({
              type: "error",
              message: res.data,
            });
          }
          this.registerLoading = false;
        },
        (error) => {
          this.$message({
            type: "error",
            message: "注册失败",
          });
          this.registerLoading = false;
        }
      );
    },
  },
};
</script>

<style scoped>
.register-container {
  background: url(/img/bg.jpg);
  background-size: cover;
  flex-direction: column;
  align-items: center;
}
.register-head {
  height: 57px;
  margin: 20px auto;
  letter-spacing: 4px;
}
.card {
  opacity: 0.9;
  margin: auto;
  width: 500px;
}
.to_login {
  text-decoration: none;
}
</style>
